import React, { useEffect } from 'react';
import { TouchableHighlight, StyleSheet, Text } from 'react-native';
import { Flex, List, DatePicker } from '@ant-design/react-native';
import dayjs from 'dayjs';
import ViewStyles from '@/rcomponents/viewStyles';
import AirportCompleter from './airportCompleter';
import AirplaneRegCompleter from './airplaneRegCompleter';
import AutoCompleteInput from '@/rcomponents/autoCompleteInput';

const styles = StyleSheet.create({
  dateViewText: {
    fontSize: 13,
    paddingVertical: 10,
  },
});
const CustomDateView = ({ onPress, extra }) => {
  return (
    <TouchableHighlight
      underlayColor="#CCC"
      activeOpacity={0.5}
      onPress={onPress}
      style={ViewStyles.center}
    >
      <Text style={styles.dateViewText}>{extra}</Text>
    </TouchableHighlight>
  );
};

export default function MaintainFilterHeader({ filterCond, onReload }) {
  const handleLoad = (filter) => {
    onReload({ ...filterCond, ...filter });
  };
  const status = [
    {
      value: '全部',
      text: '0',
    },
    {
      value: '已执行',
      text: '1',
    },
    {
      value: '待执行',
      text: '2',
    },
  ];
  return (
    <List>
      <Flex>
        <Flex.Item flex={3}>
          <DatePicker
            value={filterCond.startDate && new Date(filterCond.startDate)}
            mode="date"
            onOk={(date) => handleLoad({ startDate: dayjs(date) })}
            extra="起始日期"
          >
            <CustomDateView />
          </DatePicker>
        </Flex.Item>
        <Text> ~ </Text>
        <Flex.Item flex={3}>
          <DatePicker
            value={filterCond.endDate && new Date(filterCond.endDate)}
            mode="date"
            onOk={(date) => handleLoad({ endDate: dayjs(date) })}
            extra="截止日期"
          >
            <CustomDateView />
          </DatePicker>
        </Flex.Item>
      </Flex>

      <Flex>
        <Flex.Item>
          <AirplaneRegCompleter
            placeholder="全部机号"
            onComplete={(item) => handleLoad({ selAirplane: item.value })}
            value={filterCond.selAirplane}
          />
        </Flex.Item>
        <Flex.Item>
          <AirportCompleter
            placeholder="全部站点"
            onComplete={(item) => handleLoad({ selAirport: item.value })}
            value={filterCond.selAirport}
          />
        </Flex.Item>
        <Flex.Item>
          <AutoCompleteInput
            data={status}
            textExtractor={(item) => item.value}
            placeholder="执行状态"
            onComplete={(item) => handleLoad({ taskStatus: item.text })}
            flatListProps={{ listKey: 'status' }}
          />
        </Flex.Item>
      </Flex>
    </List>
  );
}
